<html>
<head>
    <title>Javascript Append Div Content Dynamically</title>
   
    <style type="text/css">

    ul {
    text-decoration: none;
    list-style-type: none;
    }

    li {
    width: 99%;
    border: solid 1px #c0c0c0;
    background-color: #e1e1e1;
    font-size: 11px;
    font-family: verdana;
    color: #000;
    padding: 5px;
    }

    </style>
   
    <script type="text/javascript" language="javascript">  
//        function createDiv()
        function goDown() {

        document.getElementById('body').scrollTop = document.getElementById('body').scrollHeight;

        }
        function createDiv(a)
        {
//            var divTag = document.createElement("div");
         
//            divTag.id = "div1";
            
//            divTag.setAttribute("align","center");
            
//            divTag.style.margin = "0px auto";
            
//            divTag.className ="dynamicDiv";
            
//            divTag.innerHTML = "This <b>HTML Div tag</b> is created using Javascript DOM dynamically.";
//            divTag.innerHTML = a;
            

//            document.body.appendChild(divTag);
            
            var pTag = document.createElement("li");
            
//            pTag.setAttribute("align","center");
           
//            pTag.innerHTML = "This paragraph <b>HTML p tag</b> is added dynamically inside the div tag.";
            pTag.innerHTML = a;            
            document.getElementById("list").appendChild(pTag);
            goDown();
        }
 
    </script>

</head>
<body id="body">
    <input id="btn1" type="button" value="create div" onclick="createDiv('hola');" />
    <div id="container">
        <ul id="list">
            <li>Coffee</li>
            <li>Milk</li>
        </ul>
    </div>
</body>
</html>
